<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        {include file="public/static" /}
        <link rel="stylesheet" href="__components__/cropper/cropper.css">
        <style>
            .layui-card-body{
                width: 80%;
                overflow: hidden;
                margin: 0 auto 1.5rem auto;
            }
            .layui-card-body .layui-row{
                width: 45%;
                padding-top: 2rem;
                padding-left: 3rem;
                float: left;
            }
            .layui-form-item .layui-input-inline{
                width: 260px;
            }
            .layui-form-item .layui-inline{
                width: 260px;
            }
            .layui-row-right{
                width: 40%;
                padding-top: 6rem;
                padding-left: 2rem;
                float: left;
                text-align: center;
            }
            #srcImgUrl{
                width: 20rem;
                height: 20rem;
                border-radius: 50%;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <form class="layui-form">
                                <input type="hidden" name="id" value="{$info.ad_id}" />
                                <input type="hidden" name="myInfo" value="1" />
                                <input type="hidden" name="account" value="{$info.ad_userNum}" />
                                <input type="hidden" name="originalHeader" value="{$info.ad_headerImg}"/>
                                <input type="hidden" id="header" name="header" value="{$info.ad_headerImg}"/>
                                <div class="layui-form-item">
                                    <label for="name" class="layui-form-label">
                                        <span class="x-red">*</span>姓名
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="name" name="name" value="{$info.ad_name}" lay-verify="name"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="name" class="layui-form-label">
                                        <span class="x-red">*</span>登录账号
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="usernum" name="usernum" value="{$info.ad_userNum}" lay-verify="usernum"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="name" class="layui-form-label">
                                        <span class="x-red">*</span>联系方式
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="phone" name="phone" value="{$info.ad_phone}" lay-verify="phone"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="name" class="layui-form-label">
                                        <span class="x-red">*</span>密码
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="password" id="password" name="password" placeholder="留空表示不修改密码" value="" lay-verify="password"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="name" class="layui-form-label">
                                        <span class="x-red">*</span>角色
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" value="{$info.ag_name}" disabled autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="name" class="layui-form-label">
                                        <span class="x-red">*</span>状态
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="hidden" name="status" value="{$info.ad_status}" />
                                        <input type="text" {eq name="info.ad_status" value="1"} value="启用" {else/} value="禁用" {/eq} disabled autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="status" class="layui-form-label">
                                        <span class="x-red">*</span>省份
                                    </label>
                                    <div class="layui-inline">
                                        <select lay-filter="province" lay-verify="province" level="2" name="province" id="province">
                                            {volist name="province" id="vo"}
                                                <option value="{$vo.ci_id}" {eq name="info.cityInfo.province" value="$vo.ci_id"} selected {/eq}>{$vo.ci_name}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="status" class="layui-form-label">
                                        <span class="x-red">*</span>城市
                                    </label>
                                    <div class="layui-inline">
                                        <select lay-filter="city" lay-verify="city" level="3" name="city" id="city">
                                            {volist name="city" id="vo"}
                                                <option value="{$vo.ci_id}" {eq name="info.cityInfo.city" value="$vo.ci_id"} selected {/eq}>{$vo.ci_name}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="status" class="layui-form-label">
                                        <span class="x-red">*</span>区县
                                    </label>
                                    <div class="layui-inline">
                                        <select lay-filter="town" lay-verify="town" name="town" id="town">
                                            {volist name="town" id="vo"}
                                                <option value="{$vo.ci_id}" {eq name="info.cityInfo.town" value="$vo.ci_id"} selected {/eq}>{$vo.ci_name}</option>
                                            {/volist}
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="name" class="layui-form-label">
                                        添加时间
                                    </label>
                                    <div class="layui-input-inline">
                                        <input disabled value="{:date('Y-m-d H:i:s',$info.ad_addTime)}" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="L_repass" class="layui-form-label">
                                    </label>
                                    <button class="layui-btn" lay-filter="add" lay-submit="">提交修改</button>
                                </div>
                            </form>
                        </div>
                        <!-- 右侧头像 -->
                        <div class="layui-row-right">
                            <div class="layui-form-item">
                                <div id="headSrcImgUrl">
                                    {empty name="info.ad_headerImg"}
                                        <img title="点击更换头像" src="__static__/images/defaultHeader.png" id="srcImgUrl" class="layui-upload-img">
                                    {else/}
                                        <img title="点击更换头像" src="__upload__/{$info.ad_headerImg}" id="srcImgUrl" class="layui-upload-img">
                                    {/empty}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<!--        <script type="text/javascript" src="__components__/cropper/cropper.js"></script>-->
        <script type="text/javascript" src="__components__/cropper/croppers.js"></script>
        <script>
            /*加载城市*/
            common.getCity('province',"{:url('Index/getCityList')}");
            /*加载区县*/
            common.getCity('city',"{:url('Index/getCityList')}");
            /*头像*/
            layui.config({
                base: '__components__/cropper/' //layui自定义layui组件目录
            }).use(['form','croppers'], function () {
                var $ = layui.jquery
                    ,form = layui.form
                    ,croppers = layui.croppers
                    ,layer= layui.layer;
                //创建一个头像上传组件
                croppers.render({
                    elem: '#srcImgUrl'
                    ,saveW: 300     //保存宽度
                    ,saveH: 300
                    ,mark:  1/1    //选取比例
                    ,area:'850px'  //弹窗宽度
                    ,title:'选择头像'
                    ,url: "{:url('Admin/adminFileUpload')}"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
                    ,done: function(url){ //上传完毕回调
                        var img = '__upload__/' + url;
                        $("#header").val(url);
                        $("#srcImgUrl").attr('src', img);
                    }
                });

            });

            layui.use(['form', 'layer'], function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;
                //自定义验证规则
                form.verify({
                    //名称
                    name: function(value) {
                        if (value.length < 2) {
                            return '姓名不能小于2个字';
                        }
                        if(/^\d+\d$/.test(value)){
                            return '姓名不能全为数字';
                        }
                        if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                            return '姓名不能有特殊字符';
                        }
                    },
                    usernum: function(value) {
                        if (value.length < 6) {
                            return '用户账号不能小于6位';
                        }
                        if(/(^\_)|(\__)|(\_+$)/.test(value)){
                            return '用户名首尾不能出现下划线\'_\'';
                        }
                        if(/^\d+\d+\d$/.test(value)){
                            return '用户名不能全为数字';
                        }
                    },
                    password: function(value) {
                        if(value.length > 0){
                            if (value.length < 6) {
                                return '密码不能小于6位';
                            }
                            if(/^\d+\d+\d$/.test(value)){
                                return '密码不能全为数字';
                            }
                        }
                    },
                    province:function (value) {
                        if (value == '') {
                            return '省份不能为空';
                        }
                    },
                    city:function (value) {
                        if (value == '') {
                            return '城市不能为空';
                        }
                    },
                    town:function (value) {
                        if (value == '') {
                            return '区县不能为空';
                        }
                    }
                });
                //监听提交
                form.on('submit(add)', function(data) {
                    //发异步，把数据提交给php
                    layer.confirm('确认要修改您的信息吗？',function(){
						var index = layer.load();
                        $.ajax({
                            type:"post",
                            url:"{:url('Admin/adminInfoEdit')}",
                            data: data.field,
                            dataType: 'json',
                            success:function (data) {
                                console.log(data);
                                if(data.status === 1){
                                    layer.msg(data.info, {icon: 6,time:1500});
                                }else{
                                    layer.msg(data.info, {icon: 5,time:1500});
                                }
                                layer.close(index);
                            },
                            error:function (data) {
                                console.log(data);
                                layer.msg("不好意思，出现了一点问题", {icon: 5});
                            }
                        });
                    });
                    //必须加上return false，不然无法关闭iframe
                    return false;
                });
            });
        </script>
    </body>
</html>
